<template>
  <div class="custom-table-column">
    <div class="split-bar"
      v-for="(item,requireIndex) in showDataList"
      :style="splitBarHeight(requireIndex)"
      :key="requireIndex"
    >
      <div class="content-text line-limit-showLine">
        <slot :item="item">
          <span :title="_.get(item,showProp,'-')">
            {{_.get(item,showProp,'-')}}
          </span>
        </slot>
      </div>
    </div>
    <template v-if="dataList.length>limitLine">
      <div class="show-more-empty"></div>
      <div class="show-more" v-if="showMore">
        <span class="text" @click="handleClick">
          {{row.isMore ? '收起显示': `显示更多(${dataList.length - limitLine})`}}
        </span>
      </div>
    </template>
  </div>
</template>

<script>
import { spanCombineArr, uniqueObjArr } from '../utils/tools'
export default {
  name:'customTableColumn',
  data(){
    return {
      combineArr:[]
    }
  },
  props:{
    dataList:{
      type:Array,
      default:()=>{
        return []
      }
    },
    limitLine:{
      type:Number,
      default:6
    },
    showLine:{
      type:Number,
      default:2
    },
    showProp:{
      type:String,
      default: ''
    },
    combineKey:{
      type:String,
      default:''
    },
    showMore:{
      type:Boolean,
      default:false
    },
    row:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  computed:{
    showDataList(){
      let temp = []
      if(this.dataList.length>this.limitLine){
        temp = this.row.isMore ? this.dataList : this.dataList.slice(0,this.limitLine)
      } else {
        temp =this.dataList
      }
      if(this.combineKey){
        this.getCombineArr(temp,this.combineKey)
        return uniqueObjArr(temp, this.combineKey)
      }
      return temp
    }
  },
  methods:{
    handleClick(){
      this.$set(this.row,'isMore',!this.row.isMore)
    },
    getCombineArr(temp,prop){
      this.combineArr = spanCombineArr(temp,prop)
    },
    splitBarHeight(index){
      return {
        '--height':this.combineArr.length
          ? this.showLine * 18 * this.combineArr[index] + (this.combineArr[index]-1)*20+'px'// 20为单元格上下padding之和
          : this.showLine * 18 + 'px'
      }
    }
  }
}
</script>

<style lang="scss">
.custom-table-column {
  .split-bar {
    position: relative;
    box-sizing: content-box;
    height: var(--height);
    line-height: 1.5;
    width: 100%;
    padding: 10px 0;
    &::before {
      position: absolute;
      left: -10px;
      bottom: 0;
      content: '';
      width: calc(100%-20px);
      height: 1px;
      background-color: #EBEEF5;
    }
    &:first-of-type {
      padding-top: 0;
    }
    &:last-of-type {
      padding-bottom: 0;
      &::before {
        height: 0px;
      }
    }
    .content-text {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .line-limit-showLine {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: attr(showLine);
    -webkit-box-orient: vertical;
  }
  .show-more-empty {
    height: 23px;
  }
  .show-more {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 33px;
    background: #fff;
    transition: all 0.3s;
    .text {
      position: relative;
      top: 5px;
      color: #66b1ff;
      &-hover {
        cursor: pointer;
      }
    }
  }
}
.el-table__row {
  position: relative;
}
.el-table__body tr:hover {
  .show-more {
    background: #F5F7FA;
  }
}
</style>
